<template>
	<view class="content">
		<view style="position: relative;">
			<image src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/bg.jpg" class="bg" mode="aspectFill">
			</image>
		</view>
		<view class="login_model">
			<view class="content_item">
				<image src="../../static/img/title.png" mode="aspectFit" class="img_title"></image>
			</view>
			<view style="display: flex;padding: 35rpx;">
				<u-subsection :list="list" activeColor="rgb(74,180,135,1)" fontSize="20" bgColor="rgb(75,163,103,0.2)"
					:bold="false" :current="curNow" @change="sectionChange"></u-subsection>
			</view>
			<view v-if="curNow===0">
				<view style="display: flex; padding: 30rpx;margin-top: -30rpx;">
					<view style="position: relative;right: -20rpx;top: 15rpx;">
						<u-icon custom-prefix="icon-smartphone iconfont" size="20" color="#888"></u-icon>
					</view>
					<u--input border="bottom" placeholder="请输入手机号码"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view
					style="width: 30%;padding-bottom: 10rpx;padding-right: 35rpx;position: absolute;right: 20rpx;top:380rpx;">
					<u-button color="rgb(75,163,103,1)" text="获取验证码"></u-button>
				</view>
				<view style="display: flex;padding: 30rpx;padding-top: 20rpx;">
					<view style="position: relative;right: -20rpx;top: 15rpx;">
						<u-icon custom-prefix="icon-shield-flash iconfont" size="20" color="#888"></u-icon>
					</view>
					<u--input border="bottom" placeholder="请输入验证码"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
			</view>
			<view v-else>
				<view style="display: flex;padding: 30rpx;margin-top: -30rpx;position: relative;">
					<view style="position: relative;right: -20rpx;top: 15rpx;">
						<u-icon custom-prefix="icon-user iconfont" size="20" color="#888"></u-icon>
					</view>

					<u--input border="bottom" placeholder="请输入账号"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view style="display: flex;padding: 30rpx;padding-top: 20rpx;">
					<view style="position: relative;right: -20rpx;top: 15rpx;">
						<u-icon custom-prefix="icon-lock iconfont" size="20" color="#888"></u-icon>
					</view>

					<u--input border="bottom" placeholder="请输入密码"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
			</view>

			<view style="padding-left: 40rpx;padding-bottom: 30rpx;">
				<!-- <checkbox-group @change="checkboxChange">
					<view class="tip" style="display: flex;font-size: 23rpx; flex-direction: row;">
						<checkbox class="checkbox" value="agreed" :checked="agreed" />
						
					<view style="display: flex;padding-top: 8rpx;">
						我已阅读并同意
						<a href="#"  @click="to('/pages/userbook/userbook')">《用户服务协议》</a>
						和
						<a href="#" @click="to('/pages/privacy/privacy')">《隐私政策》</a>
					</view>
					</view>
				</checkbox-group> -->
				<view style="display: flex;">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
						<u-checkbox labelSize="13" shape="circle" activeColor="#4BA367"
							:customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
							:label="item.name" :name="item.name" :disabled="item.disabled">
						</u-checkbox>
					</u-checkbox-group>
					<view style="display: flex;color: #606266;font-size: 26rpx;padding-top: -0.8rpx;">
						<a href="#" @click="to('/pages/userbook/userbook')">《用户服务协议》</a>
						和
						<a href="#" @click="to('/pages/privacy/privacy')">《隐私政策》</a>
					</view>
				</view>

			</view>
			<view style="display: flex;width: 92%;padding-left: 30rpx;">
				<u-button color="rgb(75,163,103,1)" text="立即登录" @click="login"></u-button>
			</view>

			<view style="display: flex;justify-content: center;margin-top: 71rpx;">
				<image src="../../static/img/logo.png" style="height: 100rpx;width: 130rpx;"></image>
				<view class="font_class">数字化农业-助力乡村振兴</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['手机号登录', '账号登录'],
				curNow: 0,
				value: false,
				agreed: '',
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '我已阅读并同意',
					disabled: false
				}],
			};
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			checkboxChange(n) {
				this.checkboxValue1 = n
				console.log('change', this.checkboxValue1);
			},
			login(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.bg {
			width: 100%;
			height: 70vh;
		}

		.login_model {
			position: absolute;
			top: 460rpx;
			background-color: white;
			height: 680rpx;
			width: 100%;
			opacity: 0.9;

			.content_item {
				display: flex;
				flex-wrap: wrap;
				line-height: 80rpx;
				color: green;
				font-weight: 700;
				font-style: italic;
				padding: 40rpx;

				.img_title {
					height: 180rpx;
					width: 100%;
				}
			}

			::v-deep .u-subsection--button.data-v-244377f2 {
				height: 72rpx;
			}

			::v-deep.custome-style {
				font-size: 120px;
			}

			::v-deep .u-border-bottom {
				border-bottom-width: 0.5px !important;
				border-color: #dadbde !important;
				border-bottom-style: solid;
				padding-left: 199rpx;
				margin-left: -20rpx;
			}

			::v-deep .u-input__content__field-wrapper.data-v-fdbb9fe6 {
				position: relative;
				display: flex;
				flex-direction: row;
				margin: 0px;
				margin-left: 38rpx;
				flex: 1;
			}


			.font_class {
				color: #000;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 110rpx;
				/* 146.667% */
			}

			.font_slogan {
				font-size: 40rpx;
			}

		}
	}
</style>